

.top_btn{
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .top_btn > div{
    display: flex;
    gap:5px;
    flex-wrap: wrap;;
  }
  .top_btn button{
    height: 30px;;
    border:1px solid var(--surfcolor);
    border-radius: 5px;
    font-size:14px;
    padding:0 5px 0 30px;
    color:var(--surfcolor);
  }
  .top_btn button.sort_filter_btn{
    width:auto;
    height:30px;
    padding:4px 38px 4px 6px;
    border:1px solid var(--surfcolor);
    border-radius: 5px;
    font-size:15px;
    color:var(--surfcolor);
    background:url("../images/ico_sort_filter_surf.svg") 94% center no-repeat;
    background-size:21px;
  }
  .top_btn button.sort_filter_btn2{
    width:auto;
    height:30px;
    padding:4px 38px 4px 6px;
    border:1px solid #ddd;
    border-radius: 5px;
    font-size:15px;
    color:#555;
    background:url("../images/ico_filter_cup.jpg") 94% center no-repeat;
    background-size:21px;
  }
  .top_btn button.locateMoveBtn{
    background:url("../images/ic_marker_surf.svg") 3px center no-repeat;
    background-size:21px;
  }
  .top_btn button.map_filter_btn{
    width:auto;
    height:30px;
    padding:4px 32px 4px 6px;
    border:1px solid var(--surfcolor);
    border-radius: 5px;
    font-size:15px;
    color:var(--surfcolor);
    background:url(../images/ico-filter-surf.svg) 95% center no-repeat;
    background-size:21px;
    word-break: keep-all;
  }
  .top_btn button.reset_btn{
      width:30px;
      height:30px;
      padding:4px;
      background:url("../images/ico-refresh-surf.svg") center no-repeat;
      background-size:18px;
      word-break: keep-all;
  }
  
  .top_btn button.map_btn{
    background:url(../images/ic_map_surf.svg) 6px center no-repeat;
    background-size:17px;
    word-break: keep-all;
  }
  .top_btn button.list_btn{
    background:url(../images/ic_list_surf.svg) 5px center no-repeat;
    background-size:20px;
    word-break: keep-all;
  }
  .top_btn button.thumb_btn{
    background:url(../images/ic_thumbnail_surf.svg) 5px center no-repeat;
    background-size:20px;
    word-break: keep-all;
  }
  .top_btn button.locationView{
    background:url(../images/ic_marker_surf.svg) 5px center no-repeat;
    background-size:20px;
    word-break: keep-all;
  }
  .top_btn button.allRestaurant{
    background:url(../images/ic_rest_surf.svg) 5px center no-repeat;
    background-size:20px;
    word-break: keep-all;
  }
  
  
  .result_Filter{
    padding:8px 5px;
    background:#f9f9f9;
    width:100%;
    font-size:14px;
    margin-top:5px;
    border-radius: 5px;
    text-align: center;
  }


/* 예산range필터 */
.double_slider_box{
    width:100%;
  }
  .range_slider{
    position:relative;
    width:100%;
    height:3px;
    margin:50px 0 20px;
    background:#ddd;
  }
  .slider-track{
    height:100%;
    position:absolute;
    background:#fe696a;
  }
  .range_slider input{
    position:absolute;
    width:100%;
    background:none;
    pointer-events: none;
    top:50%;
    transform: translateY(-50%);
    appearance: none;
  }
  input[type="range"]::-webkit-slider-thumb{
    height:25px;
    width:25px;
    border-radius: 50%;
    border:5px solid #f5e9e2;
    background:var(--surfcolor);
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
  }
  input[type="range"]::-moz-range-thumb{
    height:25px;
    width:25px;
    border-radius: 50%;
    border:5px solid #f5e9e2;
    background:var(--surfcolor);
    pointer-events: auto;
    -moz-appearance: none;
    cursor: pointer;
  }
  .tooltip{
    padding:.25rem .5rem;
    border:0;
    background:#373f50;
    color:#fff;
    font-size:11px;
    line-height: 1.2;
    border-radius: 10%;
    display:block;
    position:absolute;
    text-align: center;
    white-space: nowrap;
  }
  .min-tooltip{
    left:50%;
    transform: translate(-50%, -100%);
    top:-15px;
  }
  .max-tooltip{
    top:-15px;
    right:50%;
    z-index:2;
    transform: translate(-50%, -100%);
  }
  .input-box{
    display:flex;
    margin-bottom:10px;
    align-items: center;
    gap:3px;
  }
  .input-box label{
    width:60px;
    font-size:13px;
  }
  .min-box,
  .max-box{
    width:40%;
  }
  .min-box{
    padding-left:.5rem;
  }
  .input-wrap{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items: stretch;
    width:100%;;
  }
  .input-addon{
    display:flex;
    align-items: center;
    height: 33px;;
    padding:.4rem .3rem .4rem .5rem;
    font-size:.9375rem;
    font-weight: 400;
    line-height:1.5;
    color:#4b5465;
    text-align: center;
    white-space: nowrap;
    background:#fff;
    border:1px solid #ddd;
    border-radius:.25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;;
    border-right:0;
  }
  .input-addon.on{
    background:#f1f1f1;
  }
  .input-field{
    margin-left:-1px;
    height: 33px;;
    padding:.25rem .5rem;
    font-size:0.8125rem;
    border-radius: .25rem;
    position:relative;
    flex:1 1 auto;
    width: 1%;
    min-width:0;
    color:#222;
    border:1px solid #ddd;
    background-clip:padding-box;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left:0;
  }
  .input-field:focus{
    outline:none;
  }
  .input-field:disabled{
    background:#f1f1f1;
  }
  .range_slider input:read-only{
    background-color:transparent !important;
  }
  
@media (width <= 380px){
  .top_btn button.map_filter_btn,
  .top_btn button.sort_filter_btn,
  .top_btn button{
    font-size:0px;
    padding-left:0;
    background-position:center;
    width:30px;
  }
  .result_Filter{
    font-size:12px;
  }
}